<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <el-table  :data="configList" height="650" max-height="650" style="width: 100%;">
          <el-table-column label="" width="300rpx" align="center">
            <template slot-scope="props">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>企业名称：{{ props.row.enterprise.name }}</span>
                  <el-button style="float: right; padding: 3px 0" type="text"></el-button>
                </div>
                <div class="text item">
                  岗位名称：{{ props.row.position.name }}
                </div>
                <div class="text item">
                  联系人：{{ roleCode == "common" ? props.row.userName : props.row.createBy }}
                </div>
                <div class="text item">
                  <el-badge :value="props.row.unReadNumber" class="item">
                    <el-button size="small" @click="checkInDialogue(props.row)">进入对话</el-button>
                  </el-badge>
                </div>
              </el-card>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <!-- 聊天 -->
      <el-col :span="14">
        <el-tag type="success" v-if="enterpriseName != '' && enterpriseName != null && roleCode == 'common'">企业名称：{{ enterpriseName }}</el-tag>
        <el-tag type="success" >岗位名称：{{ positionName }}</el-tag>
        <el-tag type="success">联系人名称：{{ userName }}</el-tag>
        <el-card class="box-card">
          <el-table   border :data="contentList" height="650" :current-row-key="contentList.length"  style="width: 100%;">
            <el-table-column label="" align="center">
              <template slot-scope="props" v-if="userId != props.row.userId">
                <span class="tag-group__title">{{ props.row.createTime }}</span>
                <el-tag>{{ props.row.content }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="" align="center">
              <template slot-scope="props" v-if="userId == props.row.userId">
                <el-tag>{{ props.row.content }}</el-tag>
                <span class="tag-group__title">{{ props.row.createTime }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

      </el-col>


      <el-col :span="6">
        <el-input type="textarea" :rows="8" placeholder="请输入内容" @input="changeContent" v-model="textarea">
        </el-input>
        <el-button type="success" plain @click="sendMessage">发送</el-button>
        <el-button type="success" plain @click="sendResumeMessage" v-if="roleCode == 'common'">发送简历</el-button>
      </el-col>
    </el-row>


    <!-- 简历 -->
    <el-dialog title="选择发送的简历" :visible.sync="open" width="1200px" append-to-body>
      <el-table :data="reusmeList">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="简历编号" align="center" prop="id" />
        <el-table-column label="用户编码" align="center" prop="userId" />
        <el-table-column label="自我介绍" align="center" prop="selfIntroduction" />
        <el-table-column label="工作技能" align="center" prop="workSkills" />
        <el-table-column label="学历" align="center" prop="educationalBackground" />
        <el-table-column label="年龄" align="center" prop="userAge" />
        <el-table-column label="用户性别" align="center" prop="userSex" />
        <el-table-column label="简历" align="center" prop="resume" />
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="submitForm(scope.row)"
              v-hasPermi="['system:reusme:edit']">发送简历</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { listReusme, getReusme, delReusme, addReusme, updateReusme } from "@/api/system/reusme";

import { listDialogue } from "@/api/system/dialogue";
import { getCurrentDialogueContentInfoList, addContent } from "@/api/system/content";
export default {
  name: "EnterpriseUserContent",
  data() {
    return {
      resumeInfo:null ,
      openResume:false ,
      reusmeList: [],
      open: false,
      roleCode: null,
      timer: null,// 定时器ID 
      currentDialogueId: null,
      contentList: [],
      textarea: '',
      userId: null,
      enterpriseName: "",
      positionName: null ,
      userName: "",
      configList: [],
      // 遮罩层
      // loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 企业表格数据
      enterpriseList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        name: null,
        introduction: null,
        addr: null,
        status: null,
      },

      queryContentParams: {
        pageNum: 1,
        pageSize: 1000,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    var userId = localStorage.getItem("userId")
    this.userId = userId
    this.roleCode = localStorage.getItem("roles")
    console.log(userId)
    var jump = localStorage.getItem("jump")
    if (jump == true) {
      this.configList = localStorage.getItem("jumpList")
      localStorage.setItem("jump", false)
    } else {
      this.getList();
    }
  },
  mounted() {
    // 组件挂载时启动定时器（5秒间隔）
    this.timer = setInterval(() => {
      this.getList()

      if (this.currentDialogueId != null) {
        this.queryContentParams.dialogueId = this.currentDialogueId
        getCurrentDialogueContentInfoList(this.queryContentParams).then(res => {
          this.contentList = res.rows
        })

      }
    }, 5000);
  },
  methods: {
    sendResumeMessage() {
      this.open = true
      listReusme(this.queryParams).then(response => {
        this.reusmeList = response.rows;
        this.total = response.total;
      });
    },
    submitForm(resumeInfo) {
      this.open = false

      this.textarea = "用户名称:" + resumeInfo.createBy + "  性别:" + resumeInfo.createBy + "  年龄:" + resumeInfo.createBy + "  学历:" + resumeInfo.createBy
      this.sendMessage()

      this.textarea = "自我介绍:" + resumeInfo.createBy
      this.sendMessage()

      this.textarea = "工作技能:" + resumeInfo.createBy
      this.sendMessage()

    },
    cancel() {
      this.open = false
    },
    changeContent(item) {
      // console.log("内容:" + item)
      // this.textarea = item
    },
    sendMessage() {
      if (this.textarea == '' || this.textarea == null) {
        this.$modal.msgError("发送内容不能为空");
        return;
      }
      if (this.currentDialogueId == null) {
        this.$modal.msgError("操作失败");
        return;
      }
      var contentInfo = {
        dialogueId: this.currentDialogueId,
        content: this.textarea,
        userId: this.userId
      }
      addContent(contentInfo).then(res => {
        if (res.code == 200) {
          this.textarea = null
          this.$modal.msgSuccess("操作成功");
        } else {
          this.textarea = null
          this.$modal.msgError("操作失败");
        }
      })
      this.queryContentParams.dialogueId = this.currentDialogueId
      getCurrentDialogueContentInfoList(this.queryContentParams).then(res => {
        this.contentList = res.rows
      })
    },
    checkInDialogue(info) {
      this.enterpriseName = info.enterprise.name
      this.positionName = info.position.name
      if (this.userId == info.userId) {
        this.userName = info.createBy
      } else {
        this.userName = info.userName
      }
      this.currentDialogueId = info.id
      this.queryContentParams.dialogueId = info.id 
      getCurrentDialogueContentInfoList(this.queryContentParams).then(res => {
        this.contentList = res.rows
      })
    },
    /** 查询企业列表 */
    getList() {
      this.loading = true;
      this.queryParams.userId = this.userId
      this.queryParams.id = this.currentDialogueId
      listDialogue(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.configList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.configList.forEach(item => {
          if (item.openContent == 1) {
            this.checkInDialogue(item)
          }
        });
      }
      );

    },

  }
};
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}
</style>